import React, { useState } from 'react';
import './index.less';
import { PageHeader, Space, List, Card, Button } from 'antd';
import useRouter from 'hooks/use-router';

export default () => {
    const router = useRouter();
    const [recordData, setRecordData] = useState([{}]);
    return (
        <Space className="record-detail" direction="vertical" size={20}>
            <PageHeader
                title={`数据下载`}
                subTitle={'海贼王'}
                ghost={false}
                onBack={() => router.push('/records')}
                extra={[
                    <Button key={1} type="link">
                        导出文本
                    </Button>,
                    <Button key={2} type="link">
                        导出图片
                    </Button>,
                ]}
            />
            <List
                dataSource={recordData}
                grid={{ gutter: 16, column: 4 }}
                pagination={{
                    onChange: (page) => {
                        console.log(page);
                    },
                    pageSize: 20,
                    total: 100
                }}
                renderItem={(item: any) => (
                    <List.Item>
                        <Card title={item.title}>Card content</Card>
                    </List.Item>
                )}
            ></List>
        </Space>
    );
};
